<template>
<!-- 个人中心头部 -->
  <div class="profile-header">
    <!-- 右侧图标 -->
    <div class="profile-header-icons">
      <div class="header-icons-box">
        <div class="message-icon" @click="routerMessage">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaoxi"></use>
          </svg>
        </div>
        <div class="setting-icon" @click="routerSetting">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shezhi"></use>
          </svg>
        </div>
      </div>
    </div>
    <!-- 个人头像，登录注册 -->
    <div class="login-box">
      <div class="login-touxiang">
        <img :src="avatar" alt="">
      </div>
      <div class="login-register">
        <div class="login-register-box" v-if="showUsername">
          <span @click="$router.push('/login')">登录</span>/
          <span @click="$router.push('/register')">注册</span>
        </div>
        <div class="username" v-else>{{name ? name : username}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserList } from '../../api';
export default {
  name: 'ProfileHeader',
  data() {
    return {
      showUsername: true, // 受否显示用户名
      username: '', // 用户名
      avatar: ''
    }
  },
  computed: {
  },
  mounted() {
    this.getProfileMessage();
  },
  methods: {
    // 跳转到设置页面
    routerSetting() {
      this.$router.push('/setting');
    },
    // 跳转到消息通知页面
    routerMessage() {
      this.$router.push('/message');
    },
    // 已登录显示用户信息
    getProfileMessage() {
      getUserList({
        "username": this.$cookie.get('username')
      }).then(res => {
        this.showUsername = false;
        this.username = res.data.data[0].username;
        this.name = res.data.data[0].name;
        this.avatar = res.data.data[0].src;
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.profile-header {
  width: 100%;
  height: 100%;
  background-color: $color;
  display: flex;
  flex-flow: column wrap;
  // 图标
  .profile-header-icons {
    width: 100%;
    height: $height;
    display: flex;
    justify-content: flex-end;
    .header-icons-box {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // background-color: teal;
    }
  }
  // 头像
  .login-box {
    width: 100%;
    height: $height*2;
    background-color: $color;
    display: flex;
    justify-content: flex-start;
    .login-touxiang {
      width: $height+10;
      height: $height+10;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      margin: 0 $height/2;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .login-register {
      color: #fff;
      display: flex;
      line-height: $height+10;
    }
  }
}
</style>